<template>
    <el-dialog
        title="详情"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="1300px"
        top="30px"
        :close="clearData"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form ref="form" size="small" label-width="120px" :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借机人工号:" prop="adminCode">
                            <div class='formItem'>{{ form.adminCode }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="借机人:" prop="adminName">
                            <div class='formItem'>{{ form.adminName }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="审批状态:" prop="approveStatus">
                            <div class='formItem'>{{ form.approveStatus }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="借机时间:" prop="borrowDateStr">
                            <div class='formItem'>{{ form.borrowDateStr }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借机编码:" prop="code">
                            <div class='formItem'>{{ form.code }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="转借人工号:" prop="lenderCode">
                            <div class='formItem'>{{ form.lenderCode }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="转借人名称:" prop="lenderName">
                            <div class='formItem'>{{ form.lenderName }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="转借条码:" prop="loanBarcode">
                            <div class='formItem'>{{ form.loanBarcode }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
              
          
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="备注:" prop="remarks">
                            <div class='formItem'>{{ form.remarks }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="拟归还时间:" prop="returnDate">
                            <div class='formItem'>{{ form.returnDate }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="步骤:" prop="step">
                            <div class='formItem'>{{ form.step }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="借机用途:" prop="useTo">
                            <div class='formItem'>{{ form.useTo }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                      <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="收货人联系电话:"
                            prop="receiverPhone"
                        >
                            <div class='formItem'>{{ form.receiverPhone }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="收货单位名称:"
                            prop="receiverUnitName"
                        >
                            <div class='formItem'>{{ form.receiverUnitName }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="收货人:" prop="receiver">
                            <div class='formItem'>{{ form.receiver }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收货地址:" prop="receiverAddr">
                            <div class='formItem'>{{ form.receiverAddr }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="产品信息:" prop="posBorrowProductResponses">
                    <el-table
                        :header-cell-style="headerCellStyle"
                        :data="form.posBorrowProductResponses"
                        size="small"
                        max-height="350px"
                    >
                        <el-table-column
                            prop="productName"
                            label="产品名称"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="productCode"
                            label="产品编号"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="borrowNum"
                            label="借机数量"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="shipNum"
                            label="发货数量"
                            show-overflow-tooltip
                        ></el-table-column>

                        <el-table-column
                            prop="writeOfNum"
                            label="已核销数量"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="unWriteOfNum"
                            label="未核销数量"
                            show-overflow-tooltip
                        ></el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    data () {
        return {
            showValue: false,
            form: {
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            this.$emit('update:value', val)
            if (val) {
                this.getDetail()
            }
        }
    },
    created () {
    },
    methods: {
        // 获取列表
        async getDetail () {
            const res = await this.$http.get(this.$store.state.IP + '/borrowDevice/borrowPosDetail?id=' + this.currRow.id, {
            })
            let response = res.data
            if (response.ret === '0') {
                this.form = response.res
            }
        },
        // 清空数据
        clearData () {
            this.$refs['form'].resetFields()
            this.currentPage = 1
            this.showValue = false
            this.form = {}
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 110px

.right
    text-align: right

.wrap
    height: 500px
    overflow: auto
    padding: 20px
.formItem
    word-wrap: break-word;
    width:400px
</style>